<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>课程分类</title>
		<link rel="stylesheet" href="../../resources/css/course.css" />
		<link rel="stylesheet" href="../../resources/css/common.css" />
		<link rel="stylesheet" href="../../resources/layui/css/layui.css" />
		<script src="../../resources/js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="../../resources/js/tab.js" charset="utf-8"></script>
		<script src="../../resources/layui/layui.js"></script>
		<script type="text/javascript" src="../../resources/js/getUrlString.js"></script>
	</head>

	<body>

		<!--header start-->
		<jsp:include page="/pages/common/header.jsp"></jsp:include>
		<script>
			$(".search-input").css("color", "rgba(255, 255, 255, 0.6)");
		</script>
		<!--header end-->
		<!--courses start-->
		<div id="main">
			<div class="search">
				<div class="search_warp">
					<div class="l_img">
						<img src="../../resources/images/sea_bg1.png" />
					</div>
					<div class="r_search">
						<div class="ss">
							<input type="text" placeholder="请输入关键字..." />
							<div class="submit">
								<i class="layui-icon-search layui-icon"></i>
							</div>
						</div>
						<div class="hot-search">
							<span>热搜：</span><span>java</span><span>Python自动化测试</span><span>毕业设计</span><span>机器学习</span><span>微信开发</span><span>组件开发</span>
						</div>
					</div>
				</div>
			</div>
			<div class="s_top">
				<div class="top">
					<div class="course_content">
						<div class="course_nav_box">
							<div class="course_nav_top">
								<span class="way l">方向：</span>
								<div class="bigType">
									<ul id="bigCourseType">
										<li class="course-nav-item on">
											<a href="">全部</a>
										</li>
									</ul>
								</div>
							</div>

							<div class="course_nav_row">
								<span class="way l">二级分类：</span>
								<div class="bigType">
									<ul id="twoType">
										<li class="course-nav-item on">
											<a href="">全部</a>
										</li>

									</ul>
								</div>
							</div>

							<div class="course_nav_row">
								<span class="way l">三级分类：</span>
								<div class="bigType">
									<ul id="threeType">
										<li class="course-nav-item on">
											<a href="">全部</a>
										</li>
									</ul>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>

			<div class="content">
				<div class="paihang">
					<a class="type-select">默认排序</a>
					<a class="">最新</a>
					<a class="">最热</a>
				</div>
				<div class="course_box">
					<ul id="course_deatils">
					</ul>

					<div style="clear:both"></div>
				</div>
			</div>
			<!--Paging start  -->
			<div class="bg">
				<div id="paging2"></div>
				<div id="paging"></div>

			</div>

			<!--Paging end  -->
			<!-- footer start -->
			<jsp:include page="/pages/common/footer.jsp"></jsp:include>
			<!-- footer end -->
		</div>
		<!--courses end-->

		<script>
			$(document).ready(function() {
				layui.use("layer", function() {
					var layer = layui.layer;
					var loading = layer.msg('加载中！请稍后....', {
						icon: 16,
						shade: 0.01
					});
				})

				$.ajax({
					type: "post",
					url: "/course/queryAllBigCourseType.action",
					dataType: "json",
					success: function(data) {
						var courseBigId = data.courseBigId;
						$.each(courseBigId, function(index, item) {
							var li = "<li class='course-nav-item'><input type='hidden' value='" + item.courseTypeId + "'></input><a href='javascript:(0)' >" + item.typeValue + "</a></li>";
							$("#bigCourseType").append(li);
						});
					}
				});
				$.ajax({
					type: "post",
					url: "/course/queryAllTwoCourseTypeNoParms.action",
					dataType: "json",
					success: function(data) {
						var courseTwoId = data.courseTwoId;
						$.each(courseTwoId, function(index, item) {
							var li = "<li class='course-nav-item'><input type='hidden' value='" + item.courseTypeId + "'></input><a href='javascript:(0)'>" + item.typeValue + "</a></li>";
							$("#twoType").append(li);
						});
					}
				});
				$.ajax({
					type: "post",
					url: "/course/queryAllThreeCourseType.action",
					dataType: "json",
					success: function(data) {
						var courseThreeId = data.courseThreeId;
						$.each(courseThreeId, function(index, item) {
							var li = "<li class='course-nav-item'><input type='hidden' value='" + item.courseTypeId + "'></input><a href='javascript:(0)'>" + item.typeValue + "</a></li>";
							$("#threeType").append(li);
						});
					}
				});

				$.ajax({
					type: "post",
					url: "/course/queryAllCourse.action",
					dataType: "json",
					data: {
						"pageCount": 1,
						"pageSize": 20
					},
					success: function(data) {
						var currpage = data.totalPage;
						var pagecount = data.pageSize;
						layui.use("laypage", function() {
							var laypage = layui.laypage;
							laypage.render({
								elem: 'paging',
								count: currpage * pagecount, //总页数
								limit: 20,
								jump: function(obj, first) {
									console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
									console.log(obj.limit); //得到每页显示的条数
									var pageIndex = obj.curr;
									var pageLimit = obj.limit;
									//首次不执行
									if(!first) {
										$("#course_deatils").html("");
										toPage(pageIndex, pageLimit);
									}
								}
							});
						});

						$.each(data.row, function(index, item) {
							var courseId = item.courseId;
							var coursePicture = item.coursePicture;
							var courseDescribe = item.courseDescribe;
							var user_Name = item.user_Name;
							var courseIntergal = "";
							if(courseIntergal == 0) {
								courseIntergal = "免费";
							} else {
								courseIntergal = item.courseIntergal + "积分";
							}
							var li = "<li> <div class='courses'> <a href='/pages/course/coursedetails.jsp?courseId=" + courseId + "'> ";
							li += "<img class='course_img' src='" + coursePicture + "' /> </a>";
							li += "<div class='course_title'>" + courseDescribe + "  </div> <div class='course_other'> ";
							li += "<span class='price'>" + courseIntergal + "</span> <span class='pl'>|</span> <span class='course_user'>";
							li += "<a href=''>" + user_Name + "</a></span> </div> </div> </li>"
							$("#course_deatils").append(li);
						});
						layer.msg('加载成功！！', {
							icon: 1,
							time: 1000,
						});
					}
				});

			});
		</script>
		<script>
			$(".course_content").on("click", "li", function() {
				//				$(this).addClass("on");
				$("#paging").hide();
				$("#course_deatils").html("");
				var typeId  = $(this).find("input").val();
				$.ajax({
					type: "post",
					url: "/course/queryPagingCourseById.action",
					data: {
						"course.courseTypeId": typeId,
						"pageCount": 1,
						"pageSize": 20
					},
					dataType: "json",
					success: function(data) {
						var currpage = data.totalPage;
						var pagecount = data.pageSize;
						layui.use("laypage", function() {
							var laypage = layui.laypage;
							laypage.render({
								elem: 'paging2',
								count: currpage * pagecount, //总页数
								limit: 20,
								jump: function(obj, first) {
									console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
									console.log(obj.limit); //得到每页显示的条数
									var pageIndex = obj.curr;
									var pageLimit = obj.limit;
									//首次不执行
									if(!first) {
										$("#course_deatils").html("");
										toPage2(typeId, pageIndex, pageLimit);
									}
								}
							});
						});

						$.each(data.row, function(index, item) {
							var courseId = item.courseId;
							var coursePicture = item.coursePicture;
							var courseDescribe = item.courseDescribe;
							var user_Name = item.user_Name;
							var courseIntergal = "";
							if(courseIntergal == 0) {
								courseIntergal = "免费";
							} else {
								courseIntergal = item.courseIntergal + "积分";
							}
							var li = "<li> <div class='courses'> <a href='/pages/course/coursedetails.jsp?courseId=" + courseId + "'> ";
							li += "<img class='course_img' src='" + coursePicture + "' /> </a>";
							li += "<div class='course_title'>" + courseDescribe + "  </div> <div class='course_other'> ";
							li += "<span class='price'>" + courseIntergal + "</span> <span class='pl'>|</span> <span class='course_user'>";
							li += "<a href=''>" + user_Name + "</a></span> </div> </div> </li>"
							$("#course_deatils").append(li);
							if(data.row == null) {
								layer.msg("无相关课程");
							}
						});
						layer.msg('加载成功！！', {
							icon: 1,
							time: 1000,
						});
					}
				});
			});
		</script>
		<script>
			function toPage(pageCount, pageSize) {
				var loading = layer.msg('加载中！请稍后....', {
					icon: 16,
					shade: 0.01
				});
				$.ajax({
					type: "get",
					url: "/course/queryAllCourse.action",
					data: {
						"pageCount": pageCount,
						"pageSize": pageSize
					},
					dataType: "json",
					success: function(data) {
						$.each(data.row, function(index, item) {
							var courseId = item.courseId;
							var coursePicture = item.coursePicture;
							var courseDescribe = item.courseDescribe;
							var user_Name = item.user_Name;
							var courseIntergal = "";
							if(courseIntergal == 0) {
								courseIntergal = "免费";
							} else {
								courseIntergal = item.courseIntergal + "积分";
							}
							var li = "<li> <div class='courses'> <a href='/pages/course/coursedetails.jsp?courseId=" + courseId + "'> ";
							li += "<img class='course_img' src='" + coursePicture + "' /> </a>";
							li += "<div class='course_title'>" + courseDescribe + "  </div> <div class='course_other'> ";
							li += "<span class='price'>" + courseIntergal + "</span> <span class='pl'>|</span> <span class='course_user'>";
							li += "<a href=''>" + user_Name + "</a></span> </div> </div> </li>"
							$("#course_deatils").append(li);
							if(data.row.length == 0) {
								layer.msg("无相关课程");
							}
						});
						layer.msg('加载成功！！', {
							icon: 1,
							time: 1000,
						});
						var t = $('body').offset().top; //  获取需要跳转到标签的top值
						$(window).scrollTop(t); // 跳转到指定位置
					}
				});
			}
		</script>
		<script>
			function toPage2(typeId, pageCount, pageSize) {
				var loading = layer.msg('加载中！请稍后....', {
					icon: 16,
					shade: 0.01
				});
				$.ajax({
					type: "get",
					url: "/course/queryAllCourse.action",
					data: {
						"course.courseTypeId": typeId,
						"pageCount": pageCount,
						"pageSize": pageSize
					},
					dataType: "json",
					success: function(data) {
						$.each(data.row, function(index, item) {
							var courseId = item.courseId;
							var coursePicture = item.coursePicture;
							var courseDescribe = item.courseDescribe;
							var user_Name = item.user_Name;
							var courseIntergal = "";
							if(courseIntergal == 0) {
								courseIntergal = "免费";
							} else {
								courseIntergal = item.courseIntergal + "积分";
							}
							var li = "<li> <div class='courses'> <a href='/pages/course/coursedetails.jsp?courseId=" + courseId + "'> ";
							li += "<img class='course_img' src='" + coursePicture + "' /> </a>";
							li += "<div class='course_title'>" + courseDescribe + "  </div> <div class='course_other'> ";
							li += "<span class='price'>" + courseIntergal + "</span> <span class='pl'>|</span> <span class='course_user'>";
							li += "<a href=''>" + user_Name + "</a></span> </div> </div> </li>"
							$("#course_deatils").append(li);
						});
						layer.msg('加载成功！！', {
							icon: 1,
							time: 1000,
						});
						var t = $('body').offset().top; //  获取需要跳转到标签的top值
						$(window).scrollTop(t); // 跳转到指定位置
					}
				});
			}
		</script>
	</body>

</html>